

<!-- 个人信息 -->
<template>
	<view>
		<view class="integral-toast flex-all-center" v-if="jifenToast.perfectInformationFlag !='0'">
			<view class="toast_msg">
				<view class="msg">
					恭喜您完善信息，系统自动奖励您
					<text style="color: #FE5E49;">{{ jifenToast.givingPoint }}</text>
					积分，已存入您的积分账户。
				</view>
				<button class="version-btn" @click="iKnow">我知道了</button>
			</view>
		</view>
		<view class="container">
			<!-- <image class="b-g" :src="icon.realNamed" v-if="userInfo.name"></image> -->
			<!-- <image class="b-g" :src="icon.unRealName" v-else></image> -->
			<view class="oneRow titleHeader-Container" style="margin-top: 40rpx;">
				<view class="list-cell b-b radiusT10 content">
					<view class="line"></view>
					<text class="cell-tit title">实名认证</text>
					<view @click="gotoRealName" class="edit-Container">
						<image class="icon" :src="icon.bianji" mode=""></image>
						<view class="text">编辑</view>
					</view>
				</view>
				<view class="list-cell b-b">
					<text class="cell-tit">真实姓名</text>
					<text v-if="userInfo.name" class="cell-tip">{{ userInfo.name }}</text>
					<text v-else class="cell-tip unSet">未完善</text>
				</view>
				<view class="list-cell radiusB10">
					<text class="cell-tit">身份证号</text>
					<text v-if="userInfo.idCard" class="cell-tip">{{ userInfo.idCard }}</text>
					<text v-else class="cell-tip unSet">未完善</text>
				</view>
				
				<view class="list-cell radiusB10">
					<text class="cell-tit">身份证地址</text>
					<text v-if="userInfo.idCard" class="cell-tip">
						{{ userInfo.province || '' }}{{ userInfo.city || '' }}{{ userInfo.district || '' }}
					</text>
					<text v-else class="cell-tip unSet">未完善</text>
				</view>
 
				<!-- 实名状态 -->
				<view class="realNameStatus-Container">
					<!-- 10未认证 20已认证 -->
					<image v-if="userInfo.confirmation == 20" :src="icon.realNamed" mode=""></image>
					<image v-else-if="userInfo.confirmation == 10" :src="icon.unRealName" mode=""></image>
				</view>
			</view>

			<view class="oneRow titleHeader-Container">
				<view class="list-cell b-b radiusT10 content">
					<view class="line"></view>
					<text class="cell-tit title">基础信息</text>
					<view @click="gotoBaseInfo" class="edit-Container">
						<image class="icon" :src="icon.bianji" mode=""></image>
						<view class="text">编辑</view>
					</view>
				</view>
				<view class="userPhoto-Container list-cell b-b">
					<text class="cell-tit">头像</text>
					<image class="userPhoto" :src="imgSite + userInfo.headSculpture" mode=""></image>
				</view>
				<view class="list-cell b-b">
					<text class="cell-tit">昵称</text>
					<text v-if="userInfo.nickName" class="cell-tip">{{ userInfo.nickName }}</text>
					<text v-else class="cell-tip unSet">未完善</text>
				</view>
				<view class="list-cell b-b">
					<text class="cell-tit">性别</text>
					<view class="sex-Containere">
						<view class="label">
							<!-- 性别(1男、2女) -->
							<text v-if="userInfo.sex == 1">男</text>
							<text v-else-if="userInfo.sex == 2">女</text>
							<text v-else class="cell-tip unSet">未完善</text>
						</view>
					</view>
				</view>
				<!-- <view class="list-cell b-b">
					<text class="cell-tit">城市</text>
					<text v-if="userInfo.province || userInfo.city" class="cell-tip">{{ userInfo.province + userInfo.city }}</text>
					<text v-else class="cell-tip unSet">未完善</text>
				</view> -->
				<view class="list-cell b-b">
					<text class="cell-tit">生日</text>
					<text v-if="userInfo.birthday" class="cell-tip">{{ userInfo.birthday }}</text>
					<text v-else class="cell-tip unSet">未完善</text>
				</view>
				<view class="list-cell b-b">
					<text class="cell-tit">绑定手机</text>
					<text v-if="userInfo.telephone" class="cell-tip">{{ userInfo.telephone }}</text>
					<text v-else class="cell-tip unSet">未完善</text>
				</view>
				<view class="list-cell b-b">
					<text class="cell-tit">推荐人编码</text>
					<text v-if="userInfo.refereeId" class="cell-tip">{{ userInfo.refereeId }}</text>
					<text v-else class="cell-tip unSet">无</text>
				</view>
				<view class="list-cell radiusB10">
					<text class="cell-tit">注册日期</text>
					<text class="cell-tip">{{ userInfo.registerTime.split(" ")[0] }}</text>
				</view>
			</view>
			<view style="height: 30px;"></view>
			<!-- 提示 -->
			<!-- <view v-if="userInfo.perfectInformationFlag == 10" class="tipsMessage">*首次完善信息，系统自动送积分。</view> -->
		</view>
	</view>
</template>

<script>
import navHeader from '@/components/nav-header/nav-header';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		navHeader
	},
	data() {
		return {
			icon: {
				bianji: '/static/assets/bianji.png',
				backBtn: '/static/images/common/return.png',
				editorBtn: '/static/images/user/personInfo/editorBtn.png',
				realNamed: '/static/images/user/personInfo/realNamed.png',
				unRealName: '/static/images/user/personInfo/unRealName.png'
			},
			userInfo: {},
			jifenToast: {
				perfectInformationFlag : '0'
			}
		};
	},
	onShow() {
		this.getUserInfo();
		let that = this;
		uni.getStorage({
			key: 'tips',
			success(res) {
				that.jifenToast = res.data;
				uni.removeStorage({ key: 'tips' });
			}
		});
	},
	computed: {
		...mapState(['hasLogin', 'imgSite'])
	},
	methods: {
		iKnow(){
			this.jifenToast.perfectInformationFlag = '0';
			console.log(this.jifenToast);
		},
		// 获取用户信息
		getUserInfo() {
			let that = this;
			that.$api.globalUtil.getUserInfo(that, function(res) {
				that.userInfo = res.data.response;
			});
		},

		// goto实名认证
		gotoRealName() {
			let data = JSON.stringify(this.userInfo);
			uni.navigateTo({
				url: 'realName?userInfo=' + data
			});
		},

		// goto基础信息
		gotoBaseInfo() {
			let data = JSON.stringify(this.userInfo);
			uni.navigateTo({
				url: 'baseInfo?data=' + data
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}

// header部分
.header-Container {
	position: relative;
	width: 100%;
	height: 176rpx;
	overflow: hidden;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
	background: rgba(255, 255, 255, 1);
}

.container {
	position: relative;
	.b-g{
		position: absolute;
		width: 238rpx;
		height: 180rpx;
		top: 85rpx;
		left: 226rpx;
		z-index: 10;
	}
	.oneRow {
		margin-top: 20rpx;
		padding: 0 30rpx;
		border-radius: 10rpx;

		.radiusT10 {
			border-radius: 10rpx 10rpx 0 0;
		}
		.radiusB10 {
			border-radius: 0 0 10rpx 10rpx;
		}

		.line {
			width: 3px;
			height: 34rpx;
			background: #FE5E49;
			border-radius: 1.5px;
		}

		&.titleHeader-Container {
			position: relative;

			.content {
				align-items: center;
				padding: 0;
				height: 94rpx;
				line-height: 94rpx;
			}

			.title {
				margin-left: 32rpx;
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				line-height: 55rpx;
			}

			.edit-Container {
				display: flex;
				align-items: center;
				justify-content: end;
				padding-right: 30rpx;
				width: 120rpx;
				height: 100%;

				.icon {
					margin-right: 12rpx;
					width: 28rpx;
					height: 28rpx;
				}

				.text {
					font-size: 24rpx;
					font-family: PingFang;
					color: #FE5E49;
					line-height: 55rpx;
				}
			}

			.realNameStatus-Container {
				position: absolute;
				top: 119rpx;
				left: 50%;
				margin-left: -124rpx;
				width: 249rpx;
				height: 188rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.list-cell {
	display: flex;
	align-items:center;
	padding: 0 30rpx 0 50rpx;
	height: 106rpx;
	line-height: 106rpx;
	position: relative;
	background: #fff;
	justify-content: center;

	input {
		text-align: right;
		color: #333333;
	}

	.inputHolder {
		font-size: 28rpx;
		font-family: PingFang;
		// font-weight:500;
		color: rgba(153, 153, 153, 1);
		line-height: 55px;
	}

	&.cell-hover {
		background: #fafafa;
	}
	&.b-b:after {
		left: 30rpx;
		right: 30rpx;
	}
	&.m-t {
		margin-top: 16upx;
	}
	.cell-more {
		align-self: baseline;
		font-size: $font-lg;
		color: $font-color-light;
		margin-left: 10upx;
	}
	.cell-tit {
		flex: 1;
		margin-right: 10upx;
		font-size: 28rpx;
		font-family: PingFang;
		color: #666666;
	}
	.cell-tip {
		font-size: 28rpx;
		font-family: PingFang;
		/* font-weight:500; */
		color: #333333;
		line-height: 55rpx;

		&.unBind {
			color: #d21728;
		}
		&.unSet {
			color: #999999;
		}
	}
}

//用户头像
.userPhoto-Container {
	display: flex;
	align-items: center;
	height: 140rpx;
	line-height: 140rpx;

	.userPhoto {
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
	}
}

//性别
.sex-Containere {
	display: flex;
	align-items: center;

	.sexIcon {
		margin-left: 70rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.label {
		margin-left: 25rpx;
		font-size: 28rpx;
		font-family: PingFang;
		// font-weight:500;
		color: rgba(51, 51, 51, 1);
	}
}

//完善提示
.tipsMessage {
	margin-top: 40rpx;
	margin-bottom: 30rpx;
	width: 100%;
	text-align: center;
	font-size: 24rpx;
	font-family: PingFang;
	// font-weight:500;
	color: rgba(224, 19, 39, 1);
	line-height: 55rpx;
}
.integral-toast {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.7);
	top: 0;
	left: 0;
	.toast_msg {
		width: 600rpx;
		height: 378rpx;
		border-radius: 16rpx;
		background-color: white;
		position: relative;
		.msg {
			width: 400rpx;
			margin: 121rpx auto 0 auto;
			color: #333333;
			font-size: 26rpx;
		}
	}
	.version-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 418rpx;
		height: 70rpx;
		font-size: 28rpx;
		color: #fff;
		background: linear-gradient(135deg, rgba(210, 23, 40, 1) 0%, rgba(209, 4, 152, 1) 100%);
		border-radius: 35rpx;
		margin-top: 72rpx;
	}
}
</style>
